<template>
  <x-sub-page :content="'整改结果确认'" @goBack="handleBack">
    <!-- 基本信息 -->
    <div class="result-affirm" v-loading="pageLoading">
      <el-descriptions
        direction="vertical"
        :column="4"
        label-class-name="title-style"
        content-class-name="content-style"
      >
        <el-descriptions-item label="整改通知单号">{{ detail.number }}</el-descriptions-item>
        <el-descriptions-item label="供应商名称">{{ detail.supplierName }}</el-descriptions-item>
        <el-descriptions-item label="供应商需回复日期">{{ replaceDateTime(detail.replyDate) }}</el-descriptions-item>
        <el-descriptions-item label="供应商实际回复日期">{{
          replaceDateTime(detail.actualReplyDate) | emptyVal
        }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions direction="vertical" :column="1">
        <el-descriptions-item label="主要问题描述"> {{ detail.description | emptyVal }} </el-descriptions-item>
        <el-descriptions-item label="改进要求">{{ detail.requires | emptyVal }}</el-descriptions-item>
        <el-descriptions-item label="整改通知附件">
          <x-upload :old-file-list="detail.rectifyFileVoList" :edit-flag="false" />
        </el-descriptions-item>
      </el-descriptions>
      <Reject-detail :detail="detail"></Reject-detail>
      <template v-if="detail.srmRectifyEvidenceVoList?.length > 0">
        <el-divider />
        <el-descriptions
          direction="vertical"
          :column="1"
          label-class-name="title-style"
          content-class-name="content-style"
        >
          <el-descriptions-item label="整改证据说明">{{
            detail.srmRectifyEvidenceVoList[0].evidence | emptyVal
          }}</el-descriptions-item>

          <el-descriptions-item label="整改证据">
            <x-upload
              :edit-flag="false"
              ref="rectifyEvidence"
              :old-file-list="detail?.srmRectifyEvidenceVoList || []"
            />
          </el-descriptions-item>
        </el-descriptions>
      </template>
      <el-divider />
      <el-form :model="params" :rules="rules" ref="params" class="form-inline" label-position="top">
        <el-form-item :label="'整改结果'" prop="result" style="width: 240px">
          <x-select :options="dictOptions['srm_rectify.result']" v-model="params.result" />
        </el-form-item>
        <el-form-item :label="'整改情况说明'" prop="confirm">
          <el-input
            v-model="params.confirm"
            type="textarea"
            :placeholder="'请输入'"
            style="width: 100%"
            maxlength="2000"
            show-word-limit
            rows="4"
          ></el-input>
        </el-form-item>
        <el-form-item :label="'附件上传'" style="width: 100%">
          <x-upload
            :limit="9"
            :fileSize="30"
            :span="6"
            :edit-flag="true"
            ref="rectifyResultFile"
            :file-type="['jpg', 'jpeg', 'png', 'ppt', 'pptx', 'pdf', 'xls', 'xlsx', 'doc', 'docx']"
            :tips="'支持上传PPT/PDF/EXCEL/WORD/PNG/JPG形式文件, 最多9个, 附件大小不超过30MB.'"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <el-button @click="handleCancel">
        {{ $t('common.goBack') }}
      </el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading">
        {{ $t('common.submit') }}
      </el-button>
    </div>
  </x-sub-page>
</template>
<script>
  import { QueryDictMixin, selectDictLabel, throttle, replaceDateTime, formatSubmitFiles } from '@package/utils'
  import { EnumApiCode } from '../../../../../../globalEnum.js'
  import { apiGetRectifyInformDetail, apiReplyResult } from '@/modules/supplier/api/rectifyInform.js'
  import RejectDetail from '../components/rejectDetail.vue'

  export default {
    name: 'RectifyInformResultAffirm',
    components: { RejectDetail },
    mixins: [QueryDictMixin],
    inject: ['closePages'],
    data() {
      return {
        loading: false,
        params: {
          confirm: '',
          result: ''
        },
        rules: {
          confirm: [{ required: true, message: '请输入整改情况确认', trigger: 'blur' }],
          result: [{ required: true, message: '请选择整改结果', trigger: 'change' }]
        },
        pageLoading: false,
        detail: {},
        srmDictKeys: ['srm_rectify.state', 'srm_rectify.source', 'srm_rectify.result']
      }
    },
    computed: {
      rectifyId() {
        return this.$route.query?.rectifyId ?? '1'
      }
    },
    created() {
      this.initDictConfig()
      this.rectifyId && this.init()
    },
    methods: {
      selectDictLabel,
      replaceDateTime,
      async init() {
        try {
          this.pageLoading = true
          const { data, code } = await apiGetRectifyInformDetail(this.rectifyId)
          if (code === EnumApiCode.Success) {
            this.detail = data
          }
        } finally {
          this.pageLoading = false
        }
      },
      handleBack() {
        this.handleCancel()
      },
      handleCancel() {
        this.$router.go(-1)
        this.closePages()
      },
      handleSubmit: throttle(function () {
        this.$refs.params.validate(async (valid) => {
          if (valid) {
            try {
              const confirm = await this.$confirm('是否确认提交审核结果?', ' 提示')
              if (!confirm) {
                return false
              }
              this.loading = true
              const { code } = await apiReplyResult({
                rectifyId: this.rectifyId,
                ...this.params,
                rectifyResultFileDtoList: formatSubmitFiles(this.$refs.rectifyResultFile.fileList)
              })
              if (code === EnumApiCode.Success) {
                this.$message.success('审核结果提交成功!')
                this.handleCancel()
              }
            } finally {
              this.loading = false
            }
          } else {
            return false
          }
        })
      }, 1000)
    }
  }
</script>
<style lang="scss" scoped>
  .result-affirm {
    padding: 20px;
    overflow: auto;
    ::v-deep .title-style {
      color: #707683;
    }
    ::v-deep .content-style {
      padding-bottom: 20px;
      color: #333;
      font-size: 14px;
    }
    .reply-list {
      background-color: #efefef;
      border-radius: 8px;
      padding: 20px;
      .reply-title {
        font-size: 16px;
        color: #333;
        margin: 0 0 20px;
      }

      ::v-deep .el-descriptions__body {
        background-color: inherit;
      }
    }
  }
  .footer {
    width: 100%;
    padding: 16px 0;
    display: flex;
    justify-content: center;
    box-shadow: 0 -2px 4px rgb(0 0 0 / 5%);
    z-index: 1;
    position: relative;
  }
</style>
